<template>
	<view class="main">
		<view class="container">
			<view class="heading">
				<!-- <view class="round">
                    <uv-icon name="arrow-leftward" @click="onLoginChange(null)" :color="app.globalData.primaryColor" size="30"></uv-icon>
                </view> -->
				手机号验证码登录
			</view>
			<uv-form :model="formData" :rules="rules" ref="ruleForm">
				<uv-form-item prop="tel">
					<uv-input v-model="formData.tel" maxlength="11" type="number" placeholder="请输入手机号" border="none">
					</uv-input>
				</uv-form-item>
				<uv-form-item prop="code">
					<!-- type="number" -->
					<uv-input v-model="formData.code" maxlength="4" type="number" placeholder="请输入验证码" border="none">
						<template v-slot:suffix>
							<!-- <nut-countdown :endTime="formData.endTime" format="重新获取(sss)" @on-end="formData.endTime = 0"
								v-if="parseInt(formData.endTime) > 0" />
							<view v-else @click="getCode">获取验证码</view>
							{{formData.endTime}} -->
							<view v-if="sendType==0" @tap="getCode">
								获取验证码
							</view>
							<view v-if="sendType==1">
								{{countDown}}s
							</view>
							<view v-if="sendType==2" @tap="getCode">
								重新获取
							</view>
						</template>
					</uv-input>
				</uv-form-item>
			</uv-form>
			<view class="w-full btns">
				<uv-button text="登录" @click="submit" :loading="loading"
					:color="app.globalData.primaryColor"></uv-button>
			</view>
			<!-- <view class="between-center">
                <span class="rightFont"><span class="register">忘记密码 ?</span></span>
                <view class="rightFont">没有账号？<span class="register" @click="onLoginChange(false)">立即注册></span></view>
            </view> -->
		</view>
		<view class="read">
			<uv-checkbox-group v-model="checked" shape="circle" @change="onChange">
				<uv-checkbox label="我已阅读并同意签署" :name="true" activeColor="red"></uv-checkbox>
				<text style="color:#479de2" @click="onProtocol">(租赁服务协议及相关的内容)</text>
			</uv-checkbox-group>
		</view>
		<uv-toast ref="toastRef"></uv-toast>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import config from '@/utils/config.js';
	const baseUrl = config.baseUrl
	const app = getApp()
	const formData = reactive({
		complain: '',
		fileList: [],
		tel: '',
		code: '',
	})
	const register = reactive({
		tel: '',
		code: '',
	})
	const countDown = ref(60)
	const sendType = ref(0)
	const login = ref(null)
	const onLoginChange = (val) => {
		app.vibrate()
		login.value = val
	}
	onLoad(async (e) => {})
	const isPhone = (_, val) => {
		return (/^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val))
	}
	const rules = reactive({
		complain: [{
			required: true,
			message: '请填写投诉说明',
			trigger: ['blur', 'change']
		}],
		tel: [{
				required: true,
				message: '请输入手机号',
				trigger: ['blur', 'change']
			},
			{
				validator: isPhone,
				message: '电话格式不正确'
			},
		],
		pwd: [{
			required: true,
			message: '请输入密码',
			trigger: ['blur', 'change']
		}],
		code: [{
			required: true,
			message: '请输入验证码',
			trigger: ['blur', 'change']
		}],
	})
	const toastRef = ref(null)
	const showToast = (message, type = 'default') => {
		toastRef.value?.show({
			type,
			message
		})
	}
	const getCode = () => {
		app.vibrate()
		if (!isPhone(null, formData.tel)) {
			showToast("请正确输入手机号")
			return false
		}
		let req = {
			phone: formData.tel
		}
		app.post('api.webapp/getCode', req).then(res => {
			showToast("验证码发送成功")
			sendType.value = 1
			let interval = setInterval(() => {
				countDown.value--
				if (countDown.value == 0) {
					clearInterval(interval);
					sendType.value = 2
					countDown.value = 60
				}
			}, 1000)
			formData.endTime = Date.now() + 60 * 1000
		})

	}
	const ruleForm = ref(null)
	const loading = ref(false)
	const submit = () => {
		app.vibrate()
		ruleForm.value.validate().then(valid => {
			if (!checked.value) {
				showToast("请勾选服务协议再操作")
				return false
			}

			uni.showLoading({
				title: '努力加载中',
				mask: true
			});
			loading.value = true
			let store_id = uni.getStorageSync('store_id')
			let req = {
				code: formData.code,
				phone: formData.tel,
			}
			if(store_id){
				req.store_id = store_id
			}
			app.post('api.webapp/login', req).then(res => {
				uni.setStorageSync("userInfo", res)
				showToast("登录成功")
				setTimeout(() => {
					uni.navigateBack();
				}, 1000)
				uni.hideLoading()
				loading.value = false
			})
		}).catch(errors => {
			console.log('error submit!!', errors)
		})
	}
	const getPhoneNumber = (val) => {
		app.vibrate()
		console.log('手机号信息', val);
		if (!val) {
			uni.getPhoneNumber({
				success: (res) => {
					console.log(res);
				},
				fail: (res) => {
					console.log(res);
				},
			});
		}
	}
	const checked = ref(false)
	const onChange = (value) => {
		app.vibrate()
		checked.value = value
	}
	const onProtocol = () => {
		app.downloadFile("https://cdn.hangjizj.com/df/b1a64702c8578ebdbafa9271fc1baa.pdf")
	}
</script>

<style lang="scss" scoped>
	.main {
		position: absolute;
		height: 100%;
		width: -webkit-fill-available;
		margin: 30px;
		//display: flex;
		//justify-content: center;
		//align-items: center;
	}

	.container {
		//background: #F8F9FD;
		//background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(244, 247, 251) 100%);
		//border-radius: 40px;
		//padding: 20px;
		//border: 5px solid rgb(255, 255, 255);
		//box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
		--nut-countdown-color: rgb(170, 170, 170);
	}

	.logo {
		padding: 50px 20px;
	}

	.center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.heading {
		font-weight: 900;
		font-size: 20px;
		color: black;
		padding-bottom: 20px;
		display: flex;
		align-items: center;

		.round {
			border-radius: 50%;
			padding: 4px;
			margin-right: 10px;
			background: white;
		}
	}

	.container ::v-deep .uv-form {
		gap: 10px;
		display: grid;
		background-color: transparent;
		margin: 20px 0;

		.uv-form-item {
			background-color: white;
			border-radius: var(--nut-cell-border-radius, 6px);

			.uv-form-item__body {
				padding: 10px;

				.nut-input {
					padding: 0 0 0 5px !important;
					border: none !important;

					.uni-input-placeholder {
						color: rgb(192, 196, 204);
					}
				}

				.uv-form-item__body__left {
					flex: none !important;
					width: var(--nut-form-item-label-width, 90px) !important;
					margin-right: var(--nut-form-item-label-margin-right, 10px);
					font-size: var(--nut-form-item-label-font-size, 14px);
					font-weight: normal;
					text-align: var(--nut-form-item-label-text-align, left);
					word-wrap: break-word;
				}
			}

			.uv-form-item__body__right__message {
				//margin-left: var(--nut-form-item-label-width+25px, 90px+25px) !important;
				margin-left: 15px !important;
			}
		}

		.uv-textarea {
			padding: 0;
			margin: 0 4px;
		}

		--nut-countdown-font-size:14px
	}

	::v-deep .nut-cell-group__wrap {
		gap: 10px;
		display: grid;
		background-color: transparent;
		box-shadow: none;
		padding: 10px 0;

		.nut-form-item {
			border-radius: var(--nut-cell-border-radius, 6px);
			width: -webkit-fill-available;
			background: white;
			border: none;
			padding: 15px 20px;
			border-radius: 20px;
			margin-top: 15px;
			box-shadow: #cff0ff 0px 10px 10px -5px;
			border-inline: 2px solid transparent;

			.nut-button {
				margin: 0;
			}
		}
	}

	::v-deeep.input-placeholder {
		color: rgb(170, 170, 170);
	}

	.uni-input-input:focus {
		outline: none;
		border-inline: 2px solid #12B1D1;
	}

	.between-center {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	::v-deep.nut-button {
		display: block;
		text-align: center;
		width: -webkit-fill-available;
		font-weight: bold;
		color: white;
		padding-block: 15px;
		margin: 20px auto;
		//border-radius: 20px;
		border-radius: 5px;
		box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 20px 10px -15px;
		border: none;

		&:hover {
			transform: scale(1.03);
			box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 23px 10px -20px;
		}

		&:active {
			transform: scale(0.95);
			box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 15px 10px -10px;
		}
	}

	.read {
		display: inline-flex;
		font-size: small;
		margin-top: 20px;
	}

	.rightFont {
		font-size: 12px;
		color: rgba(6, 21, 51, 0.45);

		.register {
			color: #0099ff;
			cursor: pointer;
		}
	}

	.end {
		text-align: end;
	}

	.btns {
		gap: 10px;
		display: grid;
	}
</style>